<template>
  <div class="addressOption">
    <div class="top">
      <div class="txt">配送至</div>
      <div class="address" @click="togglePopup">
        <i class="iconfont icon-fontclass-dizhi"></i>
        <div class="spanTxt">{{ addressName }}</div>
        <i class="iconfont icon-member_right"></i>
      </div>
    </div>
    <!-- 快递地址选择器 -->
    <yz-address-list style="z-index: 8999999;" :disableDefault="true" v-model="showAddress" v-on:confirm="confirmSelectAddress" v-on:onEmit="closed"></yz-address-list>
    <!-- 快递地址选择器 end -->
  </div>
</template>
<script>
import yzAddressList from "components/ui_components/yz_addressList/index";
import { mapState } from 'vuex';
export default {
  props: ["datas"],
  data() {
    return {
      addressName: "",
      yzaddressInfo: []
    };
  },
  components: { yzAddressList },
  mounted() {
    this.txtComputed();
  },
  computed: {
    ...mapState({
      showAddress: state => state.goods.delivery_address_show
    })
  },
  methods: {
    togglePopup() {
      // 可以通过vuex的actions来改变弹窗的状态
      this.$store.commit("setGood_delivery_address_show", true);
    },
    closed(){
      this.$store.commit("setGood_delivery_address_show", false);
    },
    confirmSelectAddress(item) {
      this.yzaddressInfo = item;
      let addressq = `${this.yzaddressInfo.province || '' }${this.yzaddressInfo.city || '' }${this.yzaddressInfo.district || ''}${this.yzaddressInfo.street || ''}${this.yzaddressInfo.address || ''}`;
      this.addressName = addressq;
      this.$store.commit("setGoodAddress", item);
      this.tapMrAdress(item);
    },
    txtComputed() {
      // 默认的情况下显示 默认地址
      let { province = '', city, district = '', street = '', address = '' } = this.datas.address;
      let addressq = `${province}${city}${district}${street}${address}`;
      this.addressName = addressq;
      this.$store.commit("setGoodAddress", this.datas.address);
    },
    // 选中后设置成默认地址
    tapMrAdress(item) {
      let json = {
        username: item.username,
        mobile: item.mobile,
        province: item.province,
        city: item.city,
        district: item.district,
        address: item.address,
        isdefault: 1,
        address_id: item.id
      };
      $http.get("member.member-address.update", json, "加载中").then(
        response => {
          if (response.result === 1) {
          } else {
            this.$dialog.alert({ message: res.msg });
          }
        },
        response => {
          console.log(response.msg);
        }
      );
    }
  },
  beforeDestroy() {
    this.$store.commit("setGood_delivery_address_show", false);
  }
};
</script>
<style lang="scss" scoped>
.addressOption {
  padding: 0.88rem 0.59rem;
  background: #fff;
  margin: 10px;
  border-radius: 10px;

  .bottom {
    text-align: left;
    padding-left: 3.72rem;
    padding-right: 1.06rem;
    margin-top: 0.84rem;
    color: #565656;
    font-size: 0.75rem;
  }

  .top {
    display: flex;
    justify-content: space-between;

    .txt {
      flex-shrink: 0;
      width: 3.75rem;
      text-align: left;
      padding-left: 0.59rem;
      font-size: 0.81rem;
      color: #9c9c9c;
    }

    .address {
      flex: 1;
      display: flex;
      justify-content: space-between;
      overflow: hidden;

      .icon-fontclass-dizhi {
        color: #f14e4e;
      }

      .spanTxt {
        text-align: left;
        flex: 1;
        padding-left: 4px;
      }
    }
  }
}
</style>